<template>
  <div class="login">
    <header class="login-tit">
      <div class="login-container">
        <img class="logo" src="../assets/images/logo.png" alt>
      </div>
    </header>
    <div class="login-main">
      <div class="main">
        <div class="left">
          <h2>优加健康后台系统</h2>
          <ul>
            <li>
              <div class="field pr">
                <label class="text name" for></label>
                <input class="ipttxt" type="text" placeholder="用户名" v-model="username">
              </div>
            </li>
            <li>
              <div class="field pr">
                <label class="text psd" for></label>
                <input
                  class="ipttxt"
                  type="password"
                  placeholder="密码"
                  v-model="password"
                  @keyup.enter="login()"
                >
              </div>
            </li>
            <li>
              <input type="submit" class="loginBtn" v-on:click="login()" value="登录">
            </li>
          </ul>
        </div>
        <!-- <div class="login-right">
          <div class="loginModule">
            <h2>优加健康后台系统</h2>
            <ul>
                <li>
                  <div class="field pr">
                      <label class="text name" for=""></label>
                      <input class="ipttxt" type="text" placeholder="用户名" v-model="username">
                  </div>
                </li>
                <li>
                  <div class="field pr">
                      <label class="text psd" for=""></label>
                      <input class="ipttxt" type="password" placeholder="密码" v-model="password" @keyup.enter="login()">
                  </div>
                </li>
                <li>
                  <input type="submit" class="loginBtn" v-on:click="login()" value="登录">
                </li>
            </ul>
          </div>
        </div>-->
      </div>
    </div>
    <div class="footer">
      <span>优加健保健康科技（北京）有限公司</span>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import md5 from "md5";
const queryString = require("querystring");
import validate from "../utils/validate.js";
export default {
  name: "",
  mixins: [validate],
  data() {
    return {
      username: "", //账户
      password: "", //密码
      validateData: {}
    };
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    login() {
      this.setValidateData();
      if (!this.validateEngine(this.validateData)) return;
      var param = {
        account: this.username,
        password: md5(this.password).toLowerCase()
      };
      this.axios
        .post("/api/authserver/user/login", queryString.stringify(param))
        .then(res => {
          const data = res.data;
          if (String(data.code) === "200") {
            const token = data.data;
            this.$store.commit("setToken", token);
            localStorage.setItem("token", token);
            localStorage.setItem("username", this.username);
            this.$router.push("/");
          } else {
            this.$message(data.message || this.mes.busy);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 校验引擎
    validateEngine: function(data) {
      for (var i = 0; i < data.length; i++) {
        //console.log(this[data[i].type]);
        if (!this[data[i].type](data[i].value)) {
          // 提示具体的错误信息
          this.$message(data[i].info);
          return false;
        }
      }
      return true;
    },
    // 配置校验数据
    setValidateData: function() {
      this.validateData = [
        {
          type: "isNoEmpty",
          value: this.username,
          info: "账户不能为空"
        },
        {
          type: "isNoEmpty",
          value: this.password,
          info: "密码不能为空"
        }
      ];
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
body {
  background-color: #fafafa;
}
.login {
  position: relative;
  top: -60px;
}
.login-tit {
  height: 50px;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
.login-container {
  margin: 0 auto;
  height: 100%;
  padding: 10px 15px 0;
  text-align: left;
}
.logo {
  width: 100px;
  height: 38px;
}
li {
  list-style: none;
}
.login-main {
  width: 100%;
  height: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../assets/images/bg.png);
}
.main {
  width: 609px;
  height: 264px;
  background: url(../assets/images/main.png);
  background-size: 100% 100%;
  position: relative;
}
.login-left {
  width: 304px;
  height: 400px;
}
.login-right {
  width: 304px;
}
.left {
  width: 304px;
  position: absolute;
  right: 0;
  h2 {
    font-size: 18px;
    font-weight: normal;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  li {
    margin-bottom: 25px;
    width: 200px;
    font-size: 14px;
    color: #ababab;
    line-height: 24px;
  }
  input.ipttxt {
    border: 1px solid #c5c5c5;
    border-radius: 5px;
    color: #595959;
    height: 35px;
    line-height: 35px;
    font-weight: bolder;
    font-size: 14px;
    padding-left: 40px;
  }
}
.pr {
  position: relative;
}
.loginModule {
  background: #fff;
  border: 1px solid #e1e1e1;
  padding-bottom: 20px;
  float: left;
  width: 100%;
}
.loginModule h2 {
  font-size: 18px;
  font-weight: normal;
  height: 60px;
  line-height: 60px;
  margin: 0 30px 0 30px;
  padding-left: 20px;
  width: 85%;
  float: left;
  border-bottom: 1px solid #eee;
}
.loginModule ul {
  float: left;
  width: 82%;
}
.loginModule ul li {
  margin: 20px 50px 0px 50px;
  font-size: 14px;
  color: #ababab;
  line-height: 24px;
}
.loginModule .field {
  text-align: left;
  display: flex;
  align-items: center;
}
.loginModule .field input.ipttxt {
  border: 1px solid #c5c5c5;
  border-radius: 5px;
  color: #595959;
  height: 35px;
  line-height: 35px;
  font-weight: bolder;
  font-size: 14px;
  width: 90%;
  padding: 10px 5px;
  padding-left: 40px;
}

.text {
  position: absolute;
  left: 10px;
  height: 30px;
  line-height: 30px;
  width: 22px;
  color: #666;
}
.name {
  background: url(../assets/images/input_name.jpg) no-repeat left;
}
.psd {
  background: url(../assets/images/input_psd.jpg) no-repeat left;
}
.loginBtn {
  background-color: #cd3e44;
  border: none;
  height: 40px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  width: 200px;
  text-align: center;
  line-height: 40px;
  display: inline-block;
  border-radius: 5px;
  margin-left: 5px;
  margin-top: -5px;
}
.footer {
  font-size: 12px;
  text-align: center;
  padding-top: 10px;
}
</style>
